<template>
	<svg :class="`icon ${iconName}`" :width="size" :height="size" viewBox="0 0 1024 1024"
		xmlns="http://www.w3.org/2000/svg">
		<!-- Arrow Icon -->
		<path v-if="iconName === 'arrow'"
			d="M671.589 511.711l-39.518-39.518-230.692-230.692-0.021 0.021a28.115 28.115 0 0 0-0.809-0.851c-10.935-10.935-28.663-10.935-39.598 0-10.935 10.935-10.935 28.663 0 39.598 0.278 0.278 0.564 0.545 0.851 0.809l-0.021 0.021L592.472 511.79l-231.94 231.94c-10.935 10.935-10.935 28.663 0 39.598s28.663 10.935 39.598 0L671.668 511.79l-0.079-0.079z"
			fill="#2c2c2c" />
		<!-- Cross Icon -->
		<path v-if="iconName === 'cross'"
			d="M349.3 204.7l31.8 31.8 76.4 76.4 92.4 92.4 79.9 79.9c12.9 12.9 25.4 26.6 38.9 38.9l0.6 0.6v-25.5L637.5 531l-76.4 76.4-92.4 92.4-79.9 79.9c-13 13-26.3 25.6-38.9 38.9l-0.6 0.6c-6.7 6.7-7.2 18.9 0 25.5 7.2 6.6 18.3 7.1 25.5 0l31.8-31.8 76.4-76.4 92.4-92.4 79.9-79.9c13-13 26.3-25.6 38.9-38.9l0.6-0.6c6.9-6.9 6.9-18.6 0-25.5L663 467.4 586.6 391l-92.4-92.4-79.9-79.9c-13-13-25.6-26.3-38.9-38.9l-0.6-0.6c-6.7-6.7-18.9-7.2-25.5 0-6.6 7.3-7.1 18.4 0 25.5z"
			fill="#2c2c2c" />
		<!-- New Icon -->
		<path v-if="iconName === 'newIcon'"
			d="M938.5 535.8h-851c-12.8 0-23.3-10.4-23.3-23.3 0-12.8 10.4-23.3 23.3-23.3h851c12.8 0 23.3 10.4 23.3 23.3-0.1 12.8-10.5 23.3-23.3 23.3z"
			fill="#7D7D7D" />
		<path v-if="iconName === 'newIcon'"
			d="M777.6 718.7c-6 0-11.9-2.3-16.5-6.8-9.1-9.1-9.1-23.8 0-32.9l145.3-145.3c11.7-11.7 11.7-30.7 0-42.3L761.2 346.1c-9.1-9.1-9.1-23.8 0-32.9 9.1-9.1 23.8-9.1 32.9 0l145.3 145.3c29.8 29.8 29.8 78.3 0 108.1L794.1 711.8c-4.6 4.6-10.5 6.9-16.5 6.9z"
			fill="#7D7D7D" />
	</svg>
</template>

<script>
	export default {
		props: {
			iconName: {
				type: String,
				required: true
			},
			size: {
				type: Number,
				default: 24
			},
			color: {
				type: String,
				default: '#000'
			}
		}
	}
</script>

<style scoped>
	.icon {
		display: inline-block;
		vertical-align: middle;
	}
</style>